<template>
  <div class="box">
    <div class="search">
      <el-select v-model="value" placeholder="课程分类">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :disabled="item.disabled"
        >
        </el-option>
      </el-select>
      <el-select v-model="value" placeholder="学习类型">
        <el-option
          v-for="item in options1"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :disabled="item.disabled"
        >
        </el-option>
      </el-select>
      <el-select v-model="value" filterable placeholder="搜索"> </el-select>
    </div>
    <div class="table">
      <el-table :data="dataValue ? dataValue : tabledata" style="width: 100%">
        <el-table-column width="180">
          <template slot-scope="scope">
            <img :src="scope.row.image" alt="" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="课程名称" width="180">
        </el-table-column>
        <el-table-column prop="jieshao" label="课程介绍"> </el-table-column>
        <el-table-column prop="fenlei" label="分类"> </el-table-column>
        <el-table-column prop="shoujia" label="售价"> </el-table-column>
        <el-table-column prop="zhuangtai" label="状态"> </el-table-column>
        <el-table-column prop="timer" label="最近学习"> </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope" class="btn">
            <el-button @click="deletefn(scope.$index, scope.row)"
              >删除</el-button
            ><el-button @click="open(scope.$index, scope.row)">修改</el-button>
            <el-button @click="postfn(scope.$index, scope.row)">增加</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="课程名称" :label-width="formLabelWidth">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="课程介绍" :label-width="formLabelWidth">
            <el-input v-model="form.jieshao"></el-input>
          </el-form-item>
          <el-form-item label="分类" :label-width="formLabelWidth">
            <el-input v-model="form.fenlei"></el-input>
          </el-form-item>
          <el-form-item label="售价" :label-width="formLabelWidth">
            <el-input v-model="form.shoujia"></el-input>
          </el-form-item>
          <el-form-item label="zhuangtai" :label-width="formLabelWidth">
            <el-input v-model="form.zhuangtai"></el-input>
          </el-form-item>
          <el-form-item label="最近学习" :label-width="formLabelWidth">
            <el-input v-model="form.timer"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="pt">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import mixin from "@/mixin/mixin";
export default {
  name: "one",
  mixins: ["mixin"],
  props: ["dataValue"],
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "职业技能",
        },
        {
          value: "选项2",
          label: "企业培训",
        },
      ],
      options1: [
        {
          value: "选项1",
          label: "选修",
        },
        {
          value: "选项2",
          label: "必修",
        },
      ],
      value: "",
      //表格数据
      tabledata: [],
      form: {
        image: "",
        name: "",
        jieshao: "",
        fenlei: "",
        shoujia: "",
        zhuangtai: "",
        timer: "",
      },
      // 修改表单的状态
      dialogFormVisible: false,
      formLabelWidth: "120px",
      index: 0, //修改下标
      title: "", //表单标题
    };
  },
  components: {},
  methods: {
    // 获取数据
    async getTable() {
      const { data : all } = await mixin.getTable();
      // 刷新数据
      this.tabledata = all;
    },
    // 删除数据
    async deletefn(index) {
      console.log(index);
      let { data } = await axios.delete("/api/delete/" + index);
      console.log(data);
      this.getTable();
    },
    //修改数据业务
    async putfn(index, res) {
      this.dialogFormVisible = false;
      let { data } = await axios.put("/api/put/" + this.index, this.form);
      console.log(data, index, res);
      this.getTable();
    },
    // 弹出修改表单
    open(index, res) {
      this.index = index;
      this.dialogFormVisible = true;
      this.form.name = res.name;
      this.form.jieshao = res.jieshao;
      this.form.fenlei = res.fenlei;
      this.form.shoujia = res.shoujia;
      this.form.zhuangtai = res.zhuangtai;
      this.form.timer = res.timer;
      this.form.image = res.image;
      this.title = "修改内容";
    },
    // form框是否是修改或增加
    async postfn(index, res) {
      this.form.name = "";
      this.form.jieshao = "";
      this.form.fenlei = "";
      this.form.shoujia = "";
      this.form.zhuangtai = "";
      this.form.timer = "";
      this.form.image = res.image;
      this.title = "增加";
      this.dialogFormVisible = true;
    },
    // 增加业务
    async postfn1() {
      this.dialogFormVisible = false;
      let { data } = await axios.post("/api/post", this.form);
      console.log(data);
      this.getTable();
    },
    // 修改增加合并
    pt() {
      if (this.title == "修改内容") {
        this.putfn();
      } else if (this.title == "增加") {
        this.postfn1();
      }
    },
  },
  async created() {
    const { data } = await mixin.getTable();
    // 刷新数据
    this.tabledata = data;
  },
};
</script>
<style scoped>
.box {
  width: 100%;
  box-sizing: border-box;
}
.el-select {
  margin-right: 10px;
}
.cell {
  width: 200px;
}
.el-button {
  text-align: center;
  margin: 0 auto;
}
</style>
